<ui:composition template="templateProveedor.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:head></h:head>
	
	<ui:define name="cdListar">
		
		<!-- Lo use para probar la tabla de primefaces -->
		<style>
		
			.ui-datagrid-column { background-color: transparent; }
			
			.ui-widget-content {
				border: 0px;
				padding: 10px;
				background-color: transparent;
			}
			
			.ui-widget-content a { color: #FFFFFF; }
						
			.ui-button { padding:0px; }
			
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }
			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: 'Glyphicons Halflings'; }
			
			.ui-paginator, .ui-paginator-page { background-color: transparent; }
			
			.logo { width: 120px; height: 120px; border: 2px solid white; margin:10px; }
			
			.btn { margin:2px; }

		</style>
		 		
		
		<div style="margin-top:70px; margin-bottom:70px;" id="wall">	
			
			<a href="contenidoRegistro.xhtml" style="float:right;"><button class="btn btn-primary"><span class="glyphicon glyphicon-plus ">  </span>  Nuevo </button></a>

	        <legend>Mis Contenidos Digitales </legend>

		    <p:growl id="messages" showDetail="true" />
			<h:form id="form">
			
			    <p:dataGrid id="grid" var="cd" value="#{contenidoDigitalBean.contenidosProveedor}" resizableColumns="true" columns="1" rows="3" paginator="true" paginatorAlwaysVisible="false" paginatorPosition="left">				
					
					<div class="media">
						<a class="pull-left" href="#">
							<p:graphicImage value="/Imagenes/Logos/#{cd.nombre}" styleClass="media-object logo"/>
						</a>
					 	<div class="pull-right botonera">
							<p:commandButton title="Version" actionListener="#{versionBean.getAddVersion()}"
		    								styleClass="btn btn-primary btn-sm glyphicon glyphicon-plus">
		    				</p:commandButton>
	
							<br />					
		    				<p:commandButton title="Modificar" actionListener="#{contenidoDigitalBean.getModificarContenidoDigital(cd.idContenido)}"
		    								styleClass="btn btn-info btn-sm glyphicon glyphicon-edit" ></p:commandButton>
		    				<br />
		    				<p:commandButton title="Visualizar" actionListener="#{versionBean.verInfoVersionContenido(cd.idContenido)}"
		    								styleClass="btn btn-success btn-sm glyphicon glyphicon-search" />
		    								
		    															
							<br />
							<p:growl id="eliminar" showDetail="true" />
						    <p:commandButton actionListener="#{contenidoDigitalBean.postEliminarCD(cd.idContenido)}" 
						    			styleClass="btn btn-danger btn-sm glyphicon glyphicon-trash" update="eliminar" >							    	
						        <p:confirm header="Atencion"  icon="ui-icon-alert"
						        			message="¿Seguro que desea eliminar el contenido digital y sus versiones?" />					          
						    </p:commandButton>
							<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
						        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
						    </p:confirmDialog>
						    	<br />
						    <p:commandButton actionListener="#{proveedorBean.getEstadisticas(cd.idContenido)}" styleClass="btn btn-warning btn-sm glyphicon glyphicon-stats">
							</p:commandButton>
												    
						</div>				  
						<div class="media-body">
							<div class="pull-right" style="text-align: center; margin: 5px;">
								<h3 class="subdescription text-success"><h:outputText value="#{cd.subcategoria.nombre}" /></h3>
								<h5 class="text-info"><h:outputText value="#{cd.subcategoria.categoria.nombre}"/></h5>
								<p:rating value="3"  readonly="true" />
							</div>
							   <h3 class="media-heading" style="text-transform:uppercase;"><strong><h:outputText value="#{cd.nombre}" /></strong></h3>
							<div >
								<h:outputText value="#{cd.descripcion}" styleClass="subdescription" style="width:auto; height: auto;  overflow-x:auto; overflow-y:auto;"/>
							</div>					
						</div>
					</div>
			    </p:dataGrid>
			   	<p:resizable for="grid" aspectRatio="true"/>

			</h:form>
		</div>
							 	
	</ui:define>
</ui:composition>

